import React from "react"

import BookInfoGroup from "@/components/bookDetail/BookInfoGroup"
import ProgressBar from "@/components/bookDetail/ProgressBar"
import StatGroup from "@/components/bookDetail/StatGroup"
import BookHeader from "@/components/ui/header/Navigation"
import IconList from "@/components/ui/icon-bar/IconList"

const bookData = {
  title: "Java并发编程之美",
  author: "方腾飞 / 邹鹏 / 陈景山",
  description:
    "本书系统地介绍了Java并发编程的核心知识，包括线程、锁、并发容器、并发工具类、原理剖析及实战案例等，适合有一定Java基础的开发者阅读。",
  recommendation: 92,
  stats: [
    { label: "收藏", value: 1200 },
    { label: "阅读", value: 35000 },
    { label: "评分", value: "9.5" },
  ],
}

const CardSection: React.FC = () => (
  <section className="w-full max-w-md mx-auto md:mx-0 md:max-w-lg flex-shrink-0 p-4 sm:p-6 bg-white rounded-lg shadow min-w-0">
    <BookInfoGroup
      title={bookData.title}
      author={bookData.author}
      description={bookData.description}
    />
    <div className="mt-8">
      <div className="flex items-center justify-between mb-2">
        <span className="text-base sm:text-xl font-bold text-blue-700">
          推荐值
        </span>
        <span className="text-sm sm:text-md font-medium text-black">
          {bookData.recommendation}%
        </span>
      </div>
      <ProgressBar value={bookData.recommendation} />
    </div>
    <StatGroup stats={bookData.stats} />
  </section>
)

const CenterLayout: React.FC<React.PropsWithChildren<{}>> = ({ children }) => (
  <div className="flex flex-col md:flex-row gap-6 flex-1 mb-16 items-stretch w-full max-w-5xl mx-auto">
    {children}
  </div>
)

const BookDetailPage: React.FC = () => {
  const onMenuClick = () => {
    console.log("Menu clicked")
  }

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col px-2 sm:px-4 md:px-12 lg:px-24">
      {/* Header 仅在宽度 >700px 时显示 */}
      <div className="hidden sm:hidden md:block">
        <BookHeader onMenuClick={onMenuClick} />
      </div>
      <div className="flex-1 flex flex-col w-full">
        <CenterLayout>
          {/* 小屏只显示一列，大屏双列 */}
          <div className="block md:hidden w-full">
            <CardSection />
          </div>
          <div className="hidden md:flex flex-1 gap-6 w-full">
            <CardSection />
            <CardSection />
          </div>
        </CenterLayout>
      </div>
      {/* IconList 仅大屏显示 */}
      <div className="hidden sm:hidden md:block">
        <IconList />
      </div>
    </div>
  )
}

export default BookDetailPage
